<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>规格管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    
</head>

<body class="hold-transition skin-red sidebar-mini" >
  <!-- .box-body -->                
    <div class="box-header with-border">
        <h3 class="box-title">规格管理</h3>
    </div>
    <div class="box-body">
        <!-- 数据表格 -->
        <div class="table-box">

            <!--工具栏-->
            <div class="pull-left">
                <div class="form-group form-inline">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
                        <button type="button" onclick="deleteBatch()" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>
                        <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
                    </div>
                </div>
            </div>
            <div class="box-tools pull-right">
                <div class="has-feedback">
                    规格名称：<input  type="text" id="specName">
                    <button class="btn btn-default" onclick="getData()">查询</button>
                </div>
            </div>
            <!--工具栏/-->
              <!--数据列表-->
              <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
                  <thead>
                      <tr>
                          <th class="" style="padding-right:0px">
                              <input id="selall" type="checkbox" class="icheckbox_square-blue">
                          </th>
                          <th class="sorting_asc">规格ID</th>
                          <th class="sorting">规格名称</th>
                          <th class="text-center">操作</th>
                      </tr>
                  </thead>
                  <tbody th:id="getSpecification">

                  </tbody>
              </table>
            <div th:replace="common/common :: foot"></div>
              <!--数据列表/-->
        </div>
        <!-- 数据表格 /-->
     </div>
    <!-- /.box-body -->

  <script>
      //增加规格选项的标签
      function addTr() {
          $("#specificationAdd").append("<tr><td><input  class='form-control' name='optionName' placeholder='规格选项'></td><td> <input  class='form-control' name='orders' placeholder='排序'></td><td> <button type='button' class='btn btn-default' title='删除' onclick='deleteTr(this)'><i class='fa fa-trash-o'></i> 删除</button> </td></tr>");
      }
      //删除当前的tr
      function deleteTr(obj) {
          var parent = obj.parentNode.parentNode;
          parent.parentNode.removeChild(parent);
      }
      //增加数据
      function addSpecification() {
          $.ajax({
              url: "/specificationController/insertSpec",
              data:$("#addForm").serialize(),
              dataType: "json",
              type: "post",
              success: function (result) {
                  if (result.code == 200) {
                      getData();
                      alert("成功添加1条数据");
                  } else {
                      alert(result.message);
                  }
              },
              error: function () {
                  toastr.error("系统错误，请联系管理员");
              }
          })
      }
  </script>

<!-- 编辑窗口 -->
  <form id="addForm">
      <!-- 增加编辑窗口 -->
      <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog" >
              <div class="modal-content">
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                      <h3 id="myModalLabel">规格编辑</h3>
                  </div>
                  <div class="modal-body">

                      <table class="table table-bordered table-striped"  width="800px">
                          <tr>
                              <td>规格名称</td>
                              <td><input  class="form-control" name="specName"  placeholder="规格名称" >  </td>
                          </tr>
                      </table>

                      <!-- 规格选项 -->
                      <div class="btn-group">
                          <button type="button" class="btn btn-default" title="新建" onclick="addTr()"><i class="fa fa-file-o"></i> 新增规格选项</button>
                      </div>


                      <table class="table table-bordered table-striped table-hover dataTable" id="specificationAdd">
                          <thead>
                          <tr>
                              <th class="sorting">规格选项</th>
                              <th class="sorting">排序</th>
                              <th class="sorting">操作</th>
                          </thead>
                          <tbody>
                          <tr>
                              <td>
                                  <input  class="form-control" name="optionName" placeholder="规格选项">
                              </td>
                              <td>
                                  <input  class="form-control" name="orders" placeholder="排序">
                              </td>
                              <td>
                                  <button type="button" class="btn btn-default" title="删除" onclick="deleteTr(this)"><i class="fa fa-trash-o"></i> 删除</button>
                              </td>
                          </tr>
                          <tr>
                              <td>
                                  <input  class="form-control" name="optionName" placeholder="规格选项">
                              </td>
                              <td>
                                  <input  class="form-control" name="orders" placeholder="排序">
                              </td>
                              <td>
                                  <button type="button" class="btn btn-default" title="删除" onclick="deleteTr(this)"><i class="fa fa-trash-o"></i> 删除</button>
                              </td>
                          </tr>
                          <tr>
                              <td>
                                  <input  class="form-control" name="optionName" placeholder="规格选项">
                              </td>
                              <td>
                                  <input  class="form-control" name="orders" placeholder="排序">
                              </td>
                              <td>
                                  <button type="button" class="btn btn-default" title="删除" onclick="deleteTr(this)"><i class="fa fa-trash-o"></i> 删除</button>
                              </td>
                          </tr>
                          </tbody>
                      </table>
                  </div>
                  <div class="modal-footer">
                      <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="addSpecification()">保存</button>
                      <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
                  </div>
              </div>
          </div>
      </div>
  </form>

  <form id="updateForm">
      <!-- 增加编辑窗口 -->
      <div class="modal fade" id="aditModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog" >
              <div class="modal-content">
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                      <h3 id="myModalLabel2">规格编辑</h3>
                  </div>
                  <div class="modal-body">

                      <table class="table table-bordered table-striped"  width="800px">
                          <tr>
                              <input type="hidden" id="id" name="id">
                              <td>规格名称</td>
                              <td><input  class="form-control"   id="specName2" name="specName"  placeholder="规格名称" >  </td>
                          </tr>
                      </table>

                      <!-- 规格选项 -->
                      <div class="btn-group">
                          <button type="button" class="btn btn-default" title="新建" onclick="addTr()"><i class="fa fa-file-o"></i> 新增规格选项</button>
                      </div>

                      <table class="table table-bordered table-striped table-hover dataTable" id="specificationUpdate">
                          <thead>
                          <tr>
                              <th class="sorting">规格选项</th>
                              <th class="sorting">排序</th>
                              <th class="sorting">操作</th>
                          </thead>

                      </table>
                  </div>
                  <div class="modal-footer">
                      <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="update()">保存</button>
                      <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
                  </div>
              </div>
          </div>
      </div>
  </form>
<!--规格管理信息展示-->
	<script>
		$(function () {
			getData();
		})
		//展示页面拼接
		function getData(){
			$.ajax({
				url:"/specificationController/getSpecification",
				type:"get",
				//data : $("#OneForm").serialize(),
				data:{specName:$("#specName").val(),pageNumber:$("#pageNumber").val(),pageSize:$("#pageSize").val()},
				dataType:"json",
				async:false,
				success:function(page){
					var result=page.data.result;
					var info = "";
					$(result).each(function (i,e) {
						info+= '<tr>';
						info+= '<td><input  type="checkbox" value="'+e["id"]+'"></td>';
						info+= '<td>'+e['id']+'</td>';
						info+= '<td>'+e['specName']+'</td>';
						info+= '<td class="text-center">';
						info+= '<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#aditModal2" onclick="updateInfo('+e["id"]+')"  >修改</button>';
						info+= '</td>';
						info+= '</tr>';
					})

					$("#getSpecification").html(info);
					pageInstall(page.data);
				},
				error:function(){
					toastr.error("系统异常,请联系客服处理");
				}
			})
		}

		//规格信息增加
		function insertSpec(){
			$.ajax({
				url:"/specificationController/insertSpec",
				type:"post",
				data:$("#addFm").serialize(),
				dataType:"json",
				async:false,
				success:function(result){
					if (result.code == 200) {
						alert("增加成功");
						window.location.reload();
					}
				},
				error:function(){
					alert("系统异常,请联系客服处理");
				}
			})
		}

		//批量删除
		function deleteBatch() {
			var ids = [];
			var boxs = $("[type=checkbox]:checked");
			for (var i = 0; i < boxs.length; i++) {
				ids.push(boxs[i].value);
			}
			if(ids.length <= 0){
				toastr.error("请选择需要删除的数据");
				return;
			}
			if (confirm("是否确认删除?")){
				$.ajax({
					url:"/specificationController/deleteBatch",
					type:"post",
					data:{ids:ids},
					dataType:"json",
					async:true,
					success:function (result) {
						if (result.code == 200){
							alert(result.message);
							window.location.reload();
						} else {
							toastr.error("删除失败");
						}
					},
					error:function(result){
						toastr.error("系统异常,请联系客服处理");
					}
				})
			}
		}

        //根据id调取后台数据进行修改回显
        function updateInfo(id) {
            $.ajax({
                url: "/specificationController/getSpecVoById",
                dataType: "json",
                data:{id:id},
                type: "post",
                success: function (result) {
                    console.log(result);
                    if (result.code == 200) {
                        var brand = result.data;
                        console.log(brand);
                        $("#specName2").val(brand[0].specName);
                        $("#id").val(brand[0].id);
                        //循环拼接下面的数据
                        var info = "";
                        for (var i =0;i<brand.length;i++){
                            info += "<tr><td><input  class='form-control' name='optionName' value='" + brand[i].optionName + "' placeholder='规格选项'>";
                            info += "</td><td><input  class='form-control' name='orders' value='" + brand[i].orders + "' placeholder='排序'>";
                            info += "</td><td><button type='button' class='btn btn-default' title='删除' onclick='deleteTr(this)'><i class='fa fa-trash-o'></i> 删除</button>";
                            info += "</td></tr>";
                        }
                        $("#specificationUpdate").html(info);
                        console.log(table);
                    } else {
                        alert(result.message)
                    }
                },
                error: function (result) {
                    alert(result.message);
                }
            })
        }

        //规格修改
        function update(){
            $.ajax({
                url:"/specificationController/updateSpec",
                type:"post",
                data:$("#updateForm").serialize(),
                dataType:"json",
                async:false,
                success:function(result){
                    if (result.code == 200) {
                        alert(result.message);
                        window.location.reload();
                    }
                },
                error:function(result){
                    alert(result.message);
                }
            })
        }
	</script>

</body>

</html>